<template>
	<view class="content">
		<unicloud-db ref="unidb" v-slot:default="{loading, data, error, options}" :options="options" collection="opendb-banner"
		field="_id,bannerfile,category_id,open_url,sort,status,title" orderby="sort" where="status==true">
			<view v-if="error" class="error">{{error}}</view>
			<view v-else>
				<uni-swiper-dot :info="data" :current="current" :mode="mode" :dots-styles="dotsStyles" field="title">
					<swiper class="swiper-box" @change="change">
						<swiper-item v-for="(item, index) in data" :key="index" @click="handleBanner(index)">
							<view draggable="false" :class="item.colorClass" class="swiper-item">
								<image :src="item.bannerfile.url" mode="aspectFill" draggable="false" />
								<!-- <uni-file-picker class="image" :value="item.image_url" file-mediatype="image" return-type="object" readonly mode="aspectFill" /> -->
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
			<view class="loading" v-if="loading">加载中...</view>
		</unicloud-db>

		<view> <text>模式选择</text> </view>
		<view class="example-body">
			<view :class="{ active: modeIndex === 0 }" class="example-body-item" @click="selectMode('default', 0)"><text class="example-body-item-text">default</text></view>
			<view :class="{ active: modeIndex === 1 }" class="example-body-item" @click="selectMode('dot', 1)"><text class="example-body-item-text">dot</text></view>
			<view :class="{ active: modeIndex === 2 }" class="example-body-item" @click="selectMode('round', 2)"><text class="example-body-item-text">round</text></view>
			<view :class="{ active: modeIndex === 3 }" class="example-body-item" @click="selectMode('nav', 3)"><text class="example-body-item-text">nav</text></view>
			<view :class="{ active: modeIndex === 4 }" class="example-body-item" @click="selectMode('indexes', 4)"><text class="example-body-item-text">indexes</text></view>
		</view>
		<view> <text>颜色样式选择</text> </view>
		<view class="example-body">
			<template v-if="mode !== 'nav'">
				<view v-for="(item, index) in dotStyle" :class="{ active: styleIndex === index }" :key="index" class="example-body-item"
				 @click="selectStyle(index)">
					<view :style="{ 'background-color': item.selectedBackgroundColor, border: item.selectedBorder }" class="example-body-dots" />
					<view :style="{ 'background-color': item.backgroundColor, border: item.border }" class="example-body-dots" />
					<view :style="{ 'background-color': item.backgroundColor, border: item.border }" class="example-body-dots" />
				</view>
			</template>
			<template v-if="mode === 'nav'">
				<view v-for="(item, index) in dotStyle" :class="{ active: styleIndex === index }" :key="index" :style="{ 'background-color': item.selectedBackgroundColor }"
				 class="example-body-item" @click="selectStyle(index)">
					<text class="example-body-item-text" :style="{ color: item.color }">内容</text>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dotStyle: [{
						backgroundColor: 'rgba(0, 0, 0, .3)',
						border: '1px rgba(0, 0, 0, .3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(0, 0, 0, .9)',
						selectedBorder: '1px rgba(0, 0, 0, .9) solid'
					},
					{
						backgroundColor: 'rgba(255, 90, 95,0.3)',
						border: '1px rgba(255, 90, 95,0.3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
						selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
					},
					{
						backgroundColor: 'rgba(83, 200, 249,0.3)',
						border: '1px rgba(83, 200, 249,0.3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
						selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
					}
				],
				modeIndex: -1,
				styleIndex: -1,
				current: 0,
				mode: 'default',
				dotsStyles: {},

				options: {}, // 插槽不能访问外面的数据，通过此参数传递, 不支持传递函数
			}
		},
		onLoad() {

		},
		onReady() {
			this.$refs.unidb.loadData() // 手动调用加载数据
		},
		methods: {
			change(e) {
				this.current = e.detail.current
			},
			handleBanner(e) { // 处理banner点击
				// console.log("点击了第几个banner: ", e);
				var item = this.$refs.unidb.dataList[e]
				// console.log("item: ", item);
				var openUrl = item.open_url
				console.log("openUrl: ", openUrl);
				if (typeof(openUrl) == "undefined") {
					console.log("openUrl undefined");
					return; //banner图不可点击
				}
				if (openUrl.startsWith("http://") || openUrl.startsWith("https://")) {
					// #ifdef APP-PLUS || MP
					uni.navigateTo({
						url: '/pages/web-view/web-view?url=' + openUrl // App和小程序打开一个web-view页面加载该地址
					});
					// #endif
					// #ifdef H5
					window.open(openUrl) // H5直接打开网页
					// #endif
				} else {
					// 此处默认按本地页面处理。这里未处理schema打开其他app的情况。一般建议在落地页处理schema，而不是在banner点击时处理schema
					uni.navigateTo({
						url: openUrl,
						fail() {
							uni.showModal({
								content: '目标地址无法跳转。请检查应用版本是否最新，或者联系应用开发者',
								showCancel: false
							});
						}
					})
				}
			},
			selectStyle(index) {
				this.dotsStyles = this.dotStyle[index]
				this.styleIndex = index
			},
			selectMode(mode, index) {
				this.mode = mode
				this.modeIndex = index
				this.styleIndex = -1
				this.dotsStyles = this.dotStyle[0]
			}
		}
	}
</script>

<style>
	/* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-TOUTIAO */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url('~@/static/uni.ttf') format('truetype');
	}

	/* #endif */

	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	.example {
		padding: 0 15px 15px;
	}

	.example-info {
		padding: 15px;
		color: #3b4144;
		background: #ffffff;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14px;
		background-color: #ffffff;
	}

	/* #endif */
	.example {
		padding: 0 15px;
	}

	.example-info {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		color: #3b4144;
		background-color: #ffffff;
		font-size: 14px;
		line-height: 20px;
	}

	.example-info-text {
		font-size: 14px;
		line-height: 20px;
		color: #3b4144;
	}


	.example-body {
		flex-direction: column;
		padding: 15px;
		background-color: #ffffff;
	}

	.word-btn-white {
		font-size: 18px;
		color: #FFFFFF;
	}

	.word-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		height: 48px;
		margin: 15px;
		background-color: #007AFF;
	}

	.word-btn--hover {
		background-color: #4ca2ff;
	}


	.swiper-box {
		height: 200px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #999;
		color: #fff;
	}

	.image {
		width: 750rpx;
	}

	.uni-bg-red {
		background-color: #ff5a5f;
	}

	.uni-bg-green {
		background-color: #09bb07;
	}

	.uni-bg-blue {
		background-color: #007aff;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 20rpx;
	}

	.example-body-item {

		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: 15rpx;
		padding: 15rpx;
		height: 60rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		padding: 0 15rpx;
		/* #endif */
		flex: 1;
		border-color: #e5e5e5;
		border-style: solid;
		border-width: 1px;
		border-radius: 5px;
	}

	.example-body-item-text {
		font-size: 28rpx;
		color: #333;
	}

	.example-body-dots {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50px;
		background-color: #333333;
		margin-left: 10rpx;
	}

	.active {
		border-style: solid;
		border-color: #007aff;
		border-width: 1px;
	}

	.loading {
		padding: 20px;
		text-align: center;
	}

	.error {
		color: #DD524D;
	}

	.list-item {
		background-color: #fff;
		margin-bottom: 1px;
		padding: 30px 15px;
	}
</style>
